<!--
 * @Description: 仪表盘demo（当前只支持单表盘单指针图表）
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2020年8月19日 11:55:11
 * @LastEditTime: 2020-09-08 14:26:16
-->
<template>
    <ScreenContainer class="gaugeCharts demo">
        <!-- 标准单一数据仪表盘 -->
        <borderBox1 class="box">
            <gaugeChart :apiMethod="getData"
                        apiParam="getGauge1"
                        title="标准单一数据仪表盘"
                        valFmt="{value}%"
                        tooltipFmt="{a} <br/>{b} : {c}%" />
        </borderBox1>
        <!-- 仪表盘配置项测试 -->
        <borderBox2 class="box">
            <gaugeChart :apiMethod="getData"
                        apiParam="getGauge1"
                        title="仪表盘配置项测试"
                        valFmt="{value}%"
                        tooltipFmt="{a} <br/>{b} : {c}%"
                        axisWidth="25"
                        radius="90%"
                        :center="['50%','70%']"
                        :axisColors="[
                            [0.25, '#8bc34a'],
                            [0.75, '#ff9800'],
                            [1, '#f44336'],
                        ]"
                        :splitLine="{length:25}"
                        :startAngle="200"
                        :endAngle="-20"
                        :min="0"
                        :max="120"
                        :splitNumber="4" />
        </borderBox2>
        <!-- 自定义仪表盘样式 -->
        <borderBox3 class="box">
            <gaugeChart :apiMethod="getData"
                        apiParam="getGauge1"
                        title="自定义仪表盘样式"
                        valFmt="{value}%"
                        tooltipFmt="{a} <br/>{b} : {c}%"
                        :axisLine="axisLine"
                        :splitLine="splitLine"
                        :axisTick="axisTick"
                        :itemStyle="itemStyle" />
        </borderBox3>
        <!-- 自动切换数据 -->
        <borderBox13 class="box">
            <gaugeChart :staticData="newData"
                        title="自动切换数据"
                        valFmt="{value}%"
                        tooltipFmt="{a} <br/>{b} : {c}%" />
        </borderBox13>
        <!-- 静态数据 -->
        <borderBox5 class="box">
            <gaugeChart title="静态数据"
                        valFmt="{value}%"
                        tooltipFmt="{a} <br/>{b} : {c}%"
                        :staticData="staticData" />
        </borderBox5>
        <!-- 仪表盘改造进度图 -->
        <borderBox6 class="box"
                    :color="['#f44336','#ff9800']">
            <gaugeChart :apiMethod="getData"
                        apiParam="getGauge1"
                        @getChartData="getChartData"
                        title="仪表盘改造进度图"
                        valFmt="{value}%"
                        tooltipFmt="{a} <br/>{b} : {c}%"
                        anticlockwise
                        :startAngle='90'
                        :endAngle='-269.9999'
                        :splitNumber="10"
                        :detail="detail"
                        :seriesTitle="seriesTitle"
                        :axisLine="axisLine2"
                        :axisTick="{show:false}"
                        :splitLine="{show: false}"
                        :axisLabel="{show:false}"
                        :pointer="{show:false}" />
        </borderBox6>
    </ScreenContainer>
</template>

<script>
import { getData } from '@/api/demo' //API 请求数据
import ScreenContainer from '@/components/pages/screenContainer.vue' //全局容器
import gaugeChart from '@/components/charts/default/gaugeChart.vue' //仪表盘
import borderBox1 from '@/components/borderBox/borderBox1.vue' //边框1
import borderBox2 from '@/components/borderBox/borderBox2.vue' //边框2
import borderBox3 from '@/components/borderBox/borderBox3.vue' //边框3
import borderBox13 from '@/components/borderBox/borderBox13.vue' //边框13
import borderBox5 from '@/components/borderBox/borderBox5.vue' //边框5
import borderBox6 from '@/components/borderBox/borderBox6.vue' //边框6
export default {
    name: 'gaugeCharts',
    components: {
        ScreenContainer,
        gaugeChart,
        borderBox1,
        borderBox2,
        borderBox3,
        borderBox13,
        borderBox5,
        borderBox6,
    },
    data() {
        return {
            getData, //api方法
            seriesValue: null,
            staticData: {
                name: '类型名称',
                data: [
                    {
                        name: '张三',
                        value: '89',
                    },
                ],
            },
            newData: {
                name: '',
                data: [
                    {
                        name: '',
                        value: '0',
                    },
                ],
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 3,
                    shadowBlur: 10,
                    color: [
                        [0, 'transparent'],
                        [0.1, '#0894f6'],
                        [0.11, 'transparent'],
                        [0.2, '#0894f6'],
                        [0.21, 'transparent'],
                        [0.3, '#0894f6'],
                        [0.31, 'transparent'],
                        [0.4, '#0894f6'],
                        [0.41, 'transparent'],
                        [0.5, '#0894f6'],
                        [0.51, 'transparent'],
                        [0.6, '#0894f6'],
                        [0.61, 'transparent'],
                        [0.7, '#0894f6'],
                        [0.71, 'transparent'],
                        [0.8, '#fd0001'],
                        [0.81, 'transparent'],
                        [0.9, '#fd0001'],
                        [0.91, 'transparent'],
                        [1, '#fd0001'],
                    ],
                },
            },
            //分割线
            splitLine: {
                length: 20,
                lineStyle: {
                    color: 'auto',
                },
            },
            //指针
            itemStyle: {
                color: 'rgba(255, 36, 74,.3)',
                borderColor: 'rgba(255, 36, 74,1)',
            },
            //刻度线
            axisTick: {
                length: 10,
                lineStyle: {
                    color: 'auto',
                },
            },
            detail: {
                offsetCenter: [0, -20],
                formatter: '{value}%',
                fontSize: 40, //名称字体大小
                color: '#fff',
            },
            seriesTitle: {
                show: true,
                color: '#fff',
                fontSize: 20, //名称字体大小
                offsetCenter: [0, 30], //名称位置
            },
        }
    },
    computed: {
        axisLine2() {
            return {
                show: true,
                lineStyle: {
                    color: [
                        [0, '#ebf112'],
                        [this.seriesValue / 100, '#5f729d'],
                        [1, '#ebf112'],
                    ],
                    width: 20,
                },
            }
        },
    },
    created() {
        this.getNewData()
        clearInterval(this.$store.state.timer1)
        this.$store.state.timer1 = setInterval(() => {
            //自动切换数据
            this.getNewData()
        }, 2000)
    },
    methods: {
        getChartData(series) {
            this.seriesValue = series.data[0].value
        },
        async getNewData() {
            this.newData = await this.getData('getGauge1')
        },
    },
}
</script>
<style lang="scss" scoped>
.demo {
    .box {
        width: 33.3333%;
        height: 50%;
    }
}
</style>
